<template>
    <div class="address" v-on:click="showPOI = false">
        <titleBar title="选择联系方式及地点" :noFixed="true" /> 
        <amap v-if="isLoadMap" :site="setCityName" :setCenterSite="setCenterSite" :position="oldPosition" :cb="mapCB" :getCityCallback="getCityCallback" />
        <div class="hanlde-inner" :style="{[inputAbsolute ? 'position' : '']: 'absolute'}">
            <div class="item-input-box" v-on:click="focus">
                <input @blur="blur" placeholder="请输入联系人名称" maxlength="10" v-model="realName" class="item-input" />
                <div class="cross flex flex-center-y" v-if="realName" v-on:click="blur(), realName = ''">
                    <i class="iconfont icon-guanbi2"></i>
                </div>
            </div>
            <div class="item-input-box" v-on:click="focus">
                <input @blur="blur" placeholder="请输入联系方式" v-on:input="phoneNumberInput" v-model="phone"   type="number" pattern="[0-9]*" maxlength="11" class="item-input" />
                <div class="cross flex flex-center-y" v-if="phone" v-on:click="blur(), phone = ''">
                    <i class="iconfont icon-guanbi2"></i>
                </div>
            </div>
            <div class="flex item flex-center-y no-bottom-radius" v-on:click="onopenCity">
                <div class="name">约定地点</div>
                <div class="inner">
                    <span class="tip">{{citySelected ? citySelected : '请选择'}}</span>
                    <!-- <span v-else class="data-name">{{payOrderUpDoorDateCelectActive}}</span> -->
                </div>
                <i class="iconfont i-go icon-iconfonticonfonti2copycopy"></i>                
            </div>
            <div class="line"></div>
            <div v-show="!isSearchPOI" class="flex item flex-center-y no-top-radius no-margin-top" ref="showsite" v-on:click.stop="onShowPOI">
                <div class="name" style="color: #ccc" v-if="!nearestJunction">具体定点位置</div>
                <div v-else class="flex flex-space-x" style="width: 100%">
                    <div class="name">{{nearestJunction}}</div>
                    <div class="search-button flex flex-center-y" v-on:click="onSearchPOI">
                        <i class="iconfont icon-sousuo"></i>
                        <span class="text">搜索</span>
                    </div>
                </div>
            </div>
            <div class="item-input-box" v-on:click="focus">
                <input placeholder="地址详细备注" @blur="blur" v-model="addressBak" class="item-input" />
                <div class="cross flex flex-center-y" v-if="addressBak" v-on:click="blur(), addressBak = ''">
                    <i class="iconfont icon-guanbi2"></i>
                </div>
            </div>
        </div>
        <div class="button-box" v-show="showBottom">
            <div class="button" v-on:click="success">{{isEdit ? '确认修改' : '添加'}}</div>
        </div>    
        <div class="upDoor-popup" v-show="openCity">
            <div class="mask"></div>
            <div class="inner">
                <div class="flex handleColum flex-space-x">
                    <span class="close" v-on:click="openCity = false">取消</span>
                    <span class="done" v-on:click="cityDone">完成</span>
                </div>
                <van-picker ref="ct" :columns="cityList" @change="cityChange" />
            </div>
        </div>
        
        <div class="pois" v-if="showPOI && !isSearchPOI">
            <div class="pos" :style="posStyle">
                <div class="row" :class="[row.id === pickPOI.id ? 'activePOI' : '']" v-for="(row, index) in POI" :key="index" v-on:click="onSetPOI(row)">
                    <i class="iconfont icon-dizhi1"></i>
                    <span>{{row.name}}</span>
                </div>
            </div>
        </div>
        <div class="pois" v-if="showSearchPOI && isSearchPOI">
             <!-- :style="searchResultPosStyle" -->
            <div class="pos" :style="{
                top: '2.5rem',
                height: 'calc(100vh - 2.5rem)'
            }">
                <div class="row" :class="[row.id === pickPOI.id ? 'activePOI' : '']" v-for="(row, index) in searchPOIS" :key="index" v-on:click="onSetPOI(row)">
                    <i class="iconfont icon-dizhi1"></i>
                    <span>{{row.name}}</span>
                </div>
            </div>
        </div>
        <div v-show="isSearchPOI" class="search-poi-box" ref="searchSite">
            <div class="inner">
                <div class="flex flex-center-y">
                    <div class="search-poi-input-box" v-on:click="focus">
                        <input class="item-input" @blur="blur" ref="searchPOIInput" @input="searchChagnge" placeholder="小区/写字楼/等" maxlength="30" type="text" />
                        <i class="iconfont icon-sousuo search"></i>
                        <i v-if="showSearchClose" class="iconfont icon-guanbi2 close" v-on:click="onSearchCloseButton"></i>
                    </div>
                    <div class="close-popup" v-on:click="onSearchCloseButton">
                        <div>取消</div>
                    </div>
                </div>
            </div>
            <div class="bg"></div>
        </div>
    </div>
</template>
<script>
import main from '.'
export default main
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
